<template>
    <div>
        <div class="film-item" v-for="(film, index) in films" :key="index" @click=" $root.$emit('changePage','detail-page') ">
            <div class="film-img" :style="'background-image: url('+film.filmImg+')'">
            </div>
            <div class="film-title">{{film.filmName}}</div>
            <div class="film-source">
                <span class="star-img open" v-show="film.source"></span>
                <span class="star-img open" v-show="film.source"></span>
                <span class="star-img open" v-show="film.source"></span>
                <span class="star-img close" v-show="film.source"></span>
                <span class="star-img close" v-show="film.source"></span>
                <span class="star-source">{{film.source==null?'暂无评分':film.source}}</span>
            </div>
        </div>
    </div>

</template>

<script>
    Vue.component("film-item", {
        template: document.currentScript.ownerDocument.querySelector("template"),
        props: {
            films: {
                type: Array,
                required: true
            }
        }
    });
</script>